<template>
  <div class="jixiangwu">
    <img v-if="out" src="../statics/build/images/jx_f2.png" @click="out = !out" class="jxw_f2">
    <img v-else src="../statics/build/images/jx_f4.png" @click="out = !out" class="jxw_f2">
    <transition name="tip">
      <img v-show="tipOut && mascotAnimFinished" src="../statics/build/images/jx_f1.png" class="jxw_f1">
    </transition>
    <a
      @mouseover="tipOut = true"
      @mouseleave="tipOut = false"
      href="#"
    >
      <transition
        name="mascot"
        @before-enter="mascotAnimFinished = false"
        @before-leave="mascotAnimFinished = false"
        @after-enter="mascotAnimFinished = true"
      >
        <img ref="mascot" v-show="out" src="../statics/build/images/jx_f3.gif" class="jxw_f3">
      </transition>
    </a>
  </div>
</template>

<script>
export default {
  name: 'Mascot',
  data() {
    return {
      out: false,
      tipOut: false,
      mascotAnimFinished: false,
    }
  },
}
</script>

  <style lang="scss">
  @import '~@/statics/build/css/styles.css';
  </style>

<style lang="scss" scoped>

.tip-enter-active,
.tip-leave-active {
  transition: opacity .5s;
}

.tip-enter,
.tip-leave-to {
  opacity: 0;
}

.mascot-enter-active,
.mascot-leave-active {
  transition: left .5s;
}

.mascot-enter,
.mascot-leave-to {
  left: 0 !important;
}
</style>
